<template>
	<view class="container-shop">
		<!-- <navbar :config="config" backColor="#FFFFFF"></navbar> -->
		<u-icon name="arrow-left" class="backClassSearch" color="#020202" size="31" @click="backFun"></u-icon>
		<view class="header">
			<view class="banner" v-if="shopInfo.store_images">
				<image :src="shopInfo.store_images.split(',')[0]" mode="aspectFill"></image>
			</view>
			<view class="shop-name">
				<view class="shop-name-Top">
					<image class="shop-logo" :src="shopInfo.logo" mode="aspectFill"></image>
					<view class="title">
						<view class="title-label omit">
							{{shopInfo.shop_name}}
						</view>
						<view class="score">
							<rate :value="Math.round(shopInfo.average)"></rate>
							<view class="score-txt omit" v-if="shopInfo.average">{{shopInfo.average.toFixed(2)}}分</view>
						</view>
						<view class="tip">
							<!-- <text class="iconfont3 notice">&#xe623;</text> -->
							<image :src="imgUrl+'/shop/horn.png'" class="horn"></image>
							<text class="notice-text omit">{{shopInfo.special_offers || '暂无优惠信息'}}</text>
						</view>
					</view>
				</view>

				<view class="help">
					<view class="btn" style="margin-right: 19rpx;" @click="callPhone">
						<image :src="imgUrl+'/shop/phone.png'" class="helpImage"></image>
						<view>打电话</view>
					</view>
					<view class="btn" @click="jumpNavigator">
						<image :src="imgUrl+'/shop/location.png'" class="helpImage"></image>
						<view>导航去</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tabsView">
			<view class="tabs" :class="{'tabSticky': sticky}" :style="{'top': stickyHeight + 'px'}">
				<view class="tab" :class="{'activeTab': currentTab == index}" v-for="(item, index) in tabs"
					:key="item.i" @click="tabsChange(index)">
					<view class="label">
						{{item.label}}
					</view>
					<image :src="imgUrl+'/career/xuxianLine.png'" class="xuxianLine" v-if="index!=tabs.length-1">
					</image>
				</view>

			</view>
			<!-- <view v-if="sticky" :style="{'height': viewHeight + 'px'}"></view> -->
			<view class="mian" :style="{'height': mainHeight + 'px'}">
				<view class="body">
					<template v-if="currentTab == 0">
						<scroll-view class="scrollview" scroll-y="true">
							<view class="classifyTab" :class="{'classifyActiveTab': classifyCurrentTabXin == index}"
								v-for="(item, index) in classifyTabsXin" :key="item.id"
								@click="classifyChangeXin(index, item)">
								<view class="class-name">
									{{item.name}}
								</view>
								<image :src="imgUrl+'/list/onClass.png'" v-if="classifyCurrentTabXin == index"
									class="onClass"></image>
							</view>
						</scroll-view>
						<scroll-view class="scrollview" scroll-y="true">
							<view v-for="(item, index) in goodsListXin" :key="item.id" @click="jumpGoogsDetailXin(item)">
								<shop-goods-xin :goodsDetail="item"></shop-goods-xin>
							</view>
							<noData v-if="goodsListXin.length<=0"></noData>
						</scroll-view>
					</template>
					
					<template v-if="currentTab == 1">
						<scroll-view class="scrollview" scroll-y="true">
							<view class="classifyTab" :class="{'classifyActiveTab': classifyCurrentTab == index}"
								v-for="(item, index) in classifyTabs" :key="item.id"
								@click="classifyChange(index, item)">
								<view class="class-name">
									{{item.name}}
								</view>
								<image :src="imgUrl+'/list/onClass.png'" v-if="classifyCurrentTab == index"
									class="onClass"></image>
							</view>
						</scroll-view>
						<scroll-view class="scrollview" scroll-y="true">
							<view v-for="(item, index) in goodsList" :key="item.id" @click="jumpGoogsDetail(item)">
								<shop-goods :goodsDetail="item"></shop-goods>
							</view>
							<noData v-if="goodsList.length<=0"></noData>
						</scroll-view>
					</template>
					<template v-if="currentTab == 2">
						<view class="introduction">
							<view class="shop-text">
								<view class="label" style="padding:19rpx;">

									门店简介：
								</view>
								<view class="text">
									{{shopInfo.remark}}
								</view>
							</view>
							<view class="shop-text">
								<view class="label" style="padding-top: 38rpx;padding-bottom: 19rpx;
								padding-left: 19rpx;">
									营业时间：
								</view>
								<view class="text">
									{{shopInfo.time_quantum}}
								</view>
							</view>
							<view class="shop-text">
								<view class="label" style="padding-top: 38rpx;padding-bottom: 19rpx;
								padding-left: 19rpx;">
									门店地址：
								</view>
								<view class="text" style="padding-bottom: 19rpx;">
									{{shopInfo.address}}
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import rate from "@/components/rate.vue";
	import shopGoods from "@/components/shop-goods.vue";
	import shopGoodsXin from "@/components/shop-goodsXin.vue";
	import noData from "@/components/noData/nodata.vue"
	export default {
		components: {
			rate,
			shopGoods,
			noData,
			shopGoodsXin
			
		},
		data() {
			return {
				imgUrl: this.$mConfig.staticUrl,
				config: {
					back: true,
					title: '门店',
					color: '#FFFFFF',
					backgroundColor: [1, "#FF721B"],
					statusBarFontColor: '#FFFFFF',
					leftSlot: true
				},
				headerHeight: 0,
				stickyHeight: 0,
				viewHeight: 0,
				mainHeight: 0,
				sticky: false,
				shopId: '',
				shopInfo: {},
				classifyTabsShang:[],
				tabs: [{
						label: '线上商品',
						i: 0
					},
					{
						label: '线下商品',
						i: 2
					},
					{
						label: '商家简介',
						i: 1
					}
				],
				currentTab: 0,
				classifyTabs: [],
				classifyCurrentTab: 0,
				classifyCurrentTabXin:0,
				goodsList: [],
				goodsListXin:[],
				classifyTabsXin:[]
			}
		},
		onLoad(options) {
			if (options && options.shopId) {
				this.shopId = options.shopId
				this.getShopInfo(options.shopId)
				this.getGoodsClassify(options.shopId)
				this.getGoodsClassifyShang(options.shopId)
				this.getClassifyGoodsXin(0,options.shopId)
			}
		},
		onShow() {
			this.$nextTick(() => {
				let sysInfo = uni.getSystemInfoSync()
				this.$u.getRect('.header').then(res => {
					this.headerHeight = res.height
					this.stickyHeight = sysInfo.statusBarHeight + 44
				})
				this.$u.getRect('.tabs').then(res => {
					this.viewHeight = res.height
					this.mainHeight = sysInfo.screenHeight - sysInfo.statusBarHeight - 44 - res.height
				})
				
			})
		},
		onReady() {},
		onPageScroll(e) {
			if (e.scrollTop >= this.headerHeight) {
				this.sticky = true
			} else {
				this.sticky = false
			}
		},
		methods: {
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取店铺信息
			getShopInfo(shopId) {
				this.$http.get("/yxt/shop/info/" + shopId).then((res) => {
					// uni.stopPullDownRefresh();
					// this.loading = false;
					if (res.data && res.code == 200) {
						this.shopInfo = res.data;
					}
				});
			},
			// 获取商品分类
			getGoodsClassify(shopId) {
				this.$http.get("/offlinetype/goods/list", {
					shopId: shopId,
					isGoods: 0
				}).then(res => {
					if (res.code == 200) {
						if (res.list.length > 0) {
							this.classifyTabs = res.list
							this.getClassifyGoods(res.list[0].id, shopId)
						}
					}
				})
			},
			getGoodsClassifyShang(shopId){
				this.$http.get("/goods_group/all/"+shopId).then(res => {
						if (res.code == 200) {
							if (res.list.length > 0) {
								this.classifyTabsXin = res.list
								this.getClassifyGoodsXin( res.list[0].id,shopId)
							}
						}
					})
				},
				
				getClassifyGoodsXin(classifyId,shopId) {
					// api/goods/shop/pages/<shopId>?groupId={groupId}
					this.$http.get("/goods/shop/pages/"+shopId+"?groupId="+classifyId, {
						
					}).then(res => {
						if (res.code == 200) {
							this.goodsListXin = res.page.list
						}
					})
				},
				
				
				
				
			// 获取商品
			getClassifyGoods(classifyId, shopId) {
				this.$http.get("/offline/goods/page", {
					isUp: 1,
					typeId: classifyId,
					isGoods: 0,
					shopId: shopId,
				}).then(res => {
					if (res.code == 200) {
						this.goodsList = res.page.list
					}
				})
			},
			tabsChange(i) {
				if (this.currentTab == i) {
					return false
				}
				this.currentTab = i
			},
			classifyChange(i, item) {
				if (this.classifyCurrentTab == i) {
					return false
				}
				this.classifyCurrentTab = i
				this.getClassifyGoods(item.id, item.shop_id)
			},
			classifyChangeXin(i, item) {
				if (this.classifyCurrentTabXin == i) {
					return false
				}
				this.classifyCurrentTabXin = i
				this.getClassifyGoodsXin(item.id, item.shop_id)
			},
			
			
			callPhone() {
				if (!this.shopInfo.lr_mobile) {
					return this.$mUtil.toast('暂无客服热线')
				}
				this.$mUtil.callup(this.shopInfo.lr_mobile)
			},
			jumpNavigator() {
				if (!this.shopInfo.tx_latitude || !this.shopInfo.tx_longitude) {
					return this.$mUtil.toast('暂无地址')
				}
				this.$mUtil.jumpLocation(this.shopInfo.tx_latitude, this.shopInfo.tx_longitude)
				
			},
			jumpGoogsDetail(item) {
				uni.navigateTo({
					url: `/pages/nearbyShop/goodsDetail?goodsId=${item.id}&shopId=${item.shop_id}`
				})
			},
			jumpGoogsDetailXin(item) {
				uni.navigateTo({
					url: `/pages/product/goods/goods?id=${item.id}`
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.container-shop {
		.header {
			width: 100%;
			height: auto;
			position: relative;
			// background-color: #fff;
			// background: linear-gradient(to bottom, #FF721B 20%, #F6F6F6);

			.banner {
				width: 100%;
				height: 385rpx;

				image {
					width: 100%;
					height: 100% !important;
					vertical-align: middle;
				}
			}

			.shop-name {
				background-color: #fff;
				width: 712rpx;
				height: auto;
				background: #FFFFFF;
				border-radius: 19rpx 19rpx 19rpx 19rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				position: absolute;
				top: 303rpx;
				left: 19rpx;
				margin-bottom: 303rpx;

				.title {
					max-width: 400rpx;
					font-size: 30rpx;
					font-weight: 700;
					margin-left: 19rpx;
				}

				.title-label {
					// margin-bottom: 14rpx;
					// color: #333333;
					font-weight: 500;
					font-size: 31rpx;
					color: #333333;
					line-height: 31rpx;
					margin-bottom: 21rpx;
					margin-top: 15rpx;
				}

				.shop-logo {
					width: 154rpx;
					height: 154rpx !important;
					flex-shrink: 0;
					border-radius: 20rpx;
					margin-left: 19rpx;
					margin-top: 19rpx;
				}

				.score {
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;
					font-weight: 500;

					/deep/ .box {
						display: flex;
						align-items: center;
					}

					.score-txt {
						flex: 1;
						width: 0;
					}
				}

				.tip {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;

					.notice {
						font-size: 26rpx;
						color: rgb(226, 175, 9);
						margin-right: 4rpx;
					}
				}

				.omit {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.help {
					display: flex;
					width: 673rpx;
					margin: 0 auto;
					margin-top: 19rpx;
					padding-bottom: 19rpx;

					.btn {
						width: 327rpx;
						height: 77rpx;
						background: #FAFAFA;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 25rpx;
						color: #333333;
						line-height: 27rpx;

						.help-icon {
							margin-right: 7rpx;
							color: #FF721B;
							font-size: 36rpx;
						}
					}

				}
			}
		}

		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			width: 711rpx;
			height: 77rpx;
			margin-left: 19rpx;
			margin-top: 19rpx;
			margin-bottom: 19rpx;
			background: #FFFFFF;
			border-radius: 19rpx;

			// padding: 0 202rpx 30rpx;
			// background-color: #fff;
			.tab {
				width: 356rpx;
				height: 77rpx;
				border-radius: 19rpx 0rpx 0rpx 19rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				position: relative;
			}

			.activeTab {
				color: #FF211F;
			}
		}

		// .tabSticky {
		// 	position: fixed;
		// 	z-index: 9;
		// }

		.mian {

			.body {
				height: 100%;
				display: flex;

				.scrollview {
					height: 100%;
				}

				.scrollview:first-child {
					width: 173rpx;
					flex-shrink: 0;
					background: #F9F9F9;
					text-align: center;
					font-weight: 400;
					font-size: 25rpx;
					color: #999999;
					line-height: 38rpx;

					.classifyTab {
						position: relative;
						text-align: center;
						line-height: 85rpx;
						height: 85rpx;
						// background-color: #f6f6f6;
						display: flex;
						justify-content: center;
						color: #474747;


						.class-name {
							width: 80%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.classifyActiveTab {
						background-color: #fff;
						font-weight: 600;
						font-size: 27rpx;
						color: #FF211F;
						line-height: 38rpx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						position: relative;
						// &::before {
						// 	display: block;
						// 	content: '';
						// 	position: absolute;
						// 	left: 0;
						// 	top: 0;
						// 	// transform: translateY(-50%);
						// 	width: 6rpx;
						// 	height: 100%;
						// 	background-color: #FF211F;
						// }
					}
				}

				.scrollview:last-child {
					padding-left: 36rpx;
					padding-right: 30rpx;
					padding-top: 30rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #474747;
					background-color: #fff;

					/deep/ .no-data-view {
						margin-top: 0 !important;
					}
				}

				.introduction {
					padding: 19rpx;
					width: 712rpx;
					height: auto;
					border-radius: 19rpx 19rpx 19rpx 19rpx;
					margin: 0 19rpx;
					box-sizing: border-box;

					.shop-text {
						// padding-bottom: 17rpx;
						background-color: #fff;
					}

					.label {
						display: flex;
						align-items: center;
						font-weight: 600;
						font-size: 27rpx;
						color: #333333;
						line-height: 27rpx;

						.text-icon {
							font-size: 40rpx;
							color: #FF721B;
							margin-right: 5rpx;
						}
					}

					.text {
						font-weight: 400;
						font-size: 23rpx;
						color: rgba(51, 51, 51, 0.6);
						line-height: 35rpx;
						text-align: justified;
						font-style: normal;
						text-transform: none;
						padding-left: 19rpx;
						padding-right: 19rpx;
						width: 673rpx;
					}
				}
			}
		}
	}

	.shop-name-Top {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.horn {
		width: 27rpx !important;
		height: 27rpx !important;
		margin-right: 8rpx;
	}

	.notice-text {
		font-weight: 400;
		font-size: 23rpx;
		color: #333333;
		line-height: 27rpx;
		width: 400rpx;
	}

	.helpImage {
		width: 27rpx;
		height: 27rpx;
		margin-right: 8rpx;
	}

	.tabsView {
		position: relative;
		top: 207rpx;
	}

	.xuxianLine {
		height: 27rpx;
		width: 2rpx;
		position: absolute;
		right: 0;
	}

	.onClass {
		width: 6rpx;
		height: 39rpx;
		position: absolute;
		left: 0;
	}

	.backClassSearch {
		position: absolute;
		top: 63rpx;
		left: 12rpx;
		// width: 750rpx;
		height: 104rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		z-index: 999;
	}
</style>